<template>
  <el-form ref="ruleFormRef" :model="formInline" :rules="formRules" label-width="auto" label-position="top"
    v-loading="isLoading">
    <div class="flex">
      <div class="w-[70%] border-r-[1px] border-r-[#DCDFE6] dark:border-r-[#3A3E50] pr-[16px]" :class="formInline.sellMethod == 1 ? 'w-[70%] justify-between' : 'w-[70%]'
    ">
        <el-row :gutter="30">
          <re-col :value="24" :xs="24" :sm="24">
            <el-form-item :label="titles?.workOrderTitle" prop="workOrderTitle">
              <el-input :maxlength="30" :show-word-limit="true" v-model="formInline.workOrderTitle" clearable :placeholder="prompt?.workOrderTitle" />
            </el-form-item>
          </re-col>
          <re-col :value="12" :xs="24" :sm="24">
            <el-form-item :label="titles?.workOrderType" prop="workOrderType">
              <el-select v-model="formInline.workOrderType" placeholder="请选择工单类型">
                <el-option v-for="item in WORKORDER_TYPES" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </re-col>
          <re-col :value="12" :xs="24" :sm="24">
            <el-form-item label="派发方式" prop="sellMethod">
              <el-radio-group v-model="formInline.sellMethod">
                <el-radio v-for="item in WORKORDER_DISPATCH_TYPE" :key="item.value" :value="item.value">
                  {{ isNullOrEmpty( item.label ) }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </re-col>
          <re-col :value="12" :xs="24" :sm="24" v-if="formInline.sellMethod === 1">
            <el-form-item label="工单流程" prop="processId">
              <processesselect v-model="formInline.processId" clearable placeholder="请选择工单流程" :style="{ width: '100%' }"
                @change="handechange" @blur="formValidateField(ruleFormRef, 'processId')"></processesselect>
            </el-form-item>
          </re-col>
          <re-col :value="12" :xs="24" :sm="24" v-if="formInline.sellMethod == 2">
            <el-form-item label="通知方式" prop="noticeType">
              <el-checkbox-group v-model="formInline.noticeType">
                <el-checkbox v-for="item in WORKORDER_NOTICE_TYPE" :key="item.value" :value="item.value">
                  {{ isNullOrEmpty( item.label ) }}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </re-col>
          <re-col :value="12" :xs="24" :sm="24" v-if="formInline.sellMethod === 2">
            <el-form-item label="处理人" prop="handleUid">
              <authorizeuserproject v-model="formInline.handleUid" :projectId="operate.checkedProject" clearable
                :isid="1" placeholder="请选择" :style="{ width: '100%' }" @blur="formValidateField(ruleFormRef, 'handleUid')"/>
            </el-form-item>
          </re-col>
          <re-col :value="24" :xs="24" :sm="24">
            <el-form-item label="工单描述" prop="workOrderDesc">
              <el-input :maxlength="100" :show-word-limit="true" v-model="formInline.workOrderDesc" :autosize="{ minRows: 4 }" type="textarea" clearable
                placeholder="请输入工单描述" />
            </el-form-item>
          </re-col>
          <re-col :value="24" :xs="24" :sm="24">
            <el-form-item label="工单照片" prop="">
              <ReUpload v-model:files="formInline.workOrderImg" :limit="6"></ReUpload>
            </el-form-item>
          </re-col>
        </el-row>
        <div class="flex justify-end">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </div>
      </div>
      <div class="w-[30%] flex  pl-[10px] mb-[40px]" v-if="formInline.sellMethod === 1">
        <el-steps direction="vertical" :active="0" v-if="formInline.processId">
          <el-step :title="item.stepName" v-for="(item, index) in processData">
            <template #description>
              <div class="flex flex-wrap gap-[10px]">
                <div class="mr-[10px] whitespace-nowrap" v-for="(items, index) in item.operateUser">
                  {{ isNullOrEmpty( items.nickname ) }}
                </div>
              </div>
            </template>
          </el-step>
        </el-steps>
      </div>
    </div>
  </el-form>
</template>

<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import { usePageVariablesStoreHook } from "@/store/modules/pageVariables";
import authorizeuserproject from "@/components/select/authorizeuser/authorizeuserproject.vue";
import processesselect from "@/components/select/processesselect/processesselect.vue";
import {
  addInfo,
  editInfo
} from "@/api/operate/work-management/work-management/index";
import { getInfo } from "@/api/operate/work-management/process-configuration/index";
import {
  WORKORDER_TYPES,
  WORKORDER_DISPATCH_TYPE,
  WORKORDER_NOTICE_TYPE
} from "@/constant/workorder-mangenment";
import { ref, reactive } from "vue";
import ReUpload from "@/components/ReUpload/index.vue";
import ReCol from "@/components/ReCol";
import type { FormRules } from "element-plus";
import { titles, prompt } from "./index";
import type { infoType } from "@/api/operate/work-management/work-management/index";
import { ElMessage, ElMessageBox } from "element-plus";
import { customDebounce, customPromiseDebounce } from "@/utils/functions";
import { formValidateField } from '@/utils/functions'
type FormProps = {
  formInline: infoType;
  isLoading: boolean;
  edittype: string;
};
const operate = usePageVariablesStoreHook().getOperate();

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({}) as infoType,
  isLoading: false,
  edittype: ""
});
onMounted(() => {
  setTimeout(() => {
    console.log(props.formInline.workOrderImg, "统考");
  }, 2000);
});
const formRules = reactive(<FormRules>{
  workOrderTitle: [
    { required: true, message: prompt?.workOrderTitle, trigger: "blur" }
  ],
  sellMethod: [{ required: true, message: "请选择派发方式", trigger: "blur" }],
  processId: [{ required: true, message: "请选择工单流程", trigger: "blur" }],
  workOrderType: [
    { required: true, message: "请选择工单类型", trigger: "blur" }
  ],
  handleUid: [{ required: true, message: "请选择处理人", trigger: "blur" }],
  noticeType: [{ required: true, message: "请选择通知方式", trigger: "blur" }],
  workOrderDesc: [
    { required: true, message: "请输入工单描述", trigger: "blur" }
  ],
  workOrderImg: [{ required: true, message: "请上传工单图片", trigger: "blur" }]
});
const ruleFormRef = ref();
function getRef() {
  return ruleFormRef.value;
}
const closeDialogFn = ref(null);
const handleSubmit = () => {
  ruleFormRef.value.validate(valid => {
    if (valid) {
      if (props.edittype === "新增") {
        DebounceAddInfo({
          ...props.formInline,
          projectId: operate.checkedProject
        })
          .then(res => {
            if (res.code == 200) {
              closeDialogFn.value();
              ElMessage.success(res.msg);
            } else {
              ElMessage.error(res.msg);
            }
          })
          .catch(err => {
            if (err !== "请求中") {
            }
          });
      } else {
        DebounceEditInfo({
          ...props.formInline,
          projectId: operate.checkedProject
        })
          .then(res => {
            if (res.code == 200) {
              closeDialogFn.value();
              ElMessage.success(res.msg);
            } else {
              ElMessage.error(res.msg);
            }
          })
          .catch(err => {
            if (err !== "请求中") {
            }
          });
      }
    } else {
      console.log("error submit!!");
      return false;
    }
  });
};
//流程数据
const processData = ref([]);
const handechange = e => {
  getInfo({ id: e }).then(res => {
    if (res.code == 200) {
      processData.value = res.result.node;
    }
  });
};
const imgs = ["/files/20240608/d513b7dd5e2a5797733e711753c41042f3ce431b.jpg"]

const DebounceEditInfo = customPromiseDebounce(editInfo, 1000, true);
const DebounceAddInfo = customPromiseDebounce(addInfo, 1000, true);
const closeDialog = (fn?) => {
  fn ? (closeDialogFn.value = fn) : closeDialogFn.value();
};

const handleClose = () => {
  closeDialogFn.value("cancel");
};
defineExpose({ getRef, closeDialog });
</script>
